<template>
    <div class="customer yd-tab-custom">
        <yd-tab :callback="function(label,tabkey){titleFn(label,tabkey)}">
            <yd-tab-panel label="客户佣金统计" tabkey="0">
                <Rabateagent></Rabateagent>
            </yd-tab-panel>
            <yd-tab-panel label="企业管理层佣金统计" tabkey="1">
                <Rabatesales></Rabatesales>
            </yd-tab-panel>
            <yd-tab-panel label="每日交易品种手数" tabkey="2">
                <Volumeday></Volumeday>
            </yd-tab-panel>
            <yd-tab-panel label="每月交易品种手数" tabkey="3">
                <Volumemonth></Volumemonth>
            </yd-tab-panel>
        </yd-tab>
        <yd-backtop></yd-backtop>
    </div>
</template>

<script>
    import AjaxHttp from '../../js/ajaxHttp.js';
    import Vue from 'vue';
    import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
    import Rabateagent from './rebate-agent.vue';
    import Rabatesales from './rebate-sales.vue';
    import Volumeday from './volume-day.vue';
    import Volumemonth from './volume-month.vue';

    Vue.component(InfiniteScroll.name, InfiniteScroll);

    export default{
        components: {
            Rabateagent, Rabatesales, Volumeday, Volumemonth
        },
        data(){
            return {
                left: ''
            }
        },
        methods: {
            titleFn(label, tabkey){
                this.tabkey = Number(tabkey);
                tabkey = Number(tabkey);
                if (tabkey < 3) {
                    if (tabkey > 0) {
                        this.left = -document.querySelector('.yd-tab-nav .yd-tab-nav-item').clientWidth * (Number(tabkey) - 1);
                        //console.log(document.querySelector('.yd-tab-nav .yd-tab-nav-item').clientWidth);
                        document.querySelector('.yd-tab-nav').style.left = this.left + 'px';
                    }
                }
            },
            mounted: function () {
                document.querySelector('.yd-tab-nav').style.left = 0;
            }
        }
    }
</script>